<template>
  <div>
    <h-box header="各门店优惠券效果统计">
      <el-form :model="filterForm" inline>
        <el-form-item prop="dateRange">
          <el-date-picker v-model="filterForm.dateRange" type="daterange" align="center" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter" :loading="loading" type="primary">确定</el-button>
          <el-button @click="handleDownload" :loading="loading" icon="el-icon-download">导出数据</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="store.list" :default-sort="{ prop: 'tradeTotal', order: 'descending' }" stripe row-class-name="hui-font-number">
        <el-table-column prop="storeName" label="门店名称" sortable></el-table-column>
        <el-table-column prop="consume" label="核销数(张)" sortable></el-table-column>
        <el-table-column prop="tradeTotal" label="拉动营收(元)" sortable>
          <template slot-scope="scope">
            {{ scope.row.tradeTotal | currency('￥', 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="tradeCount" label="关联订单(笔)" sortable></el-table-column>
      </el-table>

      <!--分页，start-->
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="store.pages" :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next" :total="store.total" background class="hui-mt-2">
      </el-pagination>
      <!--分页，end-->
    </h-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          const today = new Date()
          const end = new Date()
          return (
            time.getTime() > end.setTime(today.getTime() - 3600 * 1000 * 24)
          )
        },
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      filterForm: {
        dateRange: []
      },
      loading: false,
      store: {
        pages: 0,
        total: 0,
        list: []
      }
    }
  },
  created () {
    this.setDateRange()
    this.mockStore()
  },
  methods: {
    // 初始化筛选日期
    setDateRange () {
      const today = new Date()
      const end = new Date()
      const start = new Date()
      end.setTime(today.getTime() - 3600 * 1000 * 24)
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
      this.filterForm.dateRange = [start, end]
    },
    // 翻页事件
    handleCurrentChange () {
      console.log(this.store.pages)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },
    // 筛选事件
    handleFilter () {
      this.loading = true
      console.log(this.filterForm)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
        this.loading = false
      }, 500)
    },
    // 下载事件
    handleDownload () {
      console.log('下载标签')
    },
    mockStore () {
      let pages = this.store.pages
      let total = 28
      let list = []
      let i = 0
      let tmp = [
        {
          storeName: '门店名称1',
          consume: 240,
          tradeTotal: 12223,
          tradeCount: 240
        },
        {
          storeName: '门店名称2',
          consume: 240,
          tradeTotal: 12223,
          tradeCount: 240
        }
      ]
      for (i in tmp) {
        list.push(tmp[i])
      }
      this.store.list = list
      this.store.pages = pages + 1
      this.store.total = total
    }
  }
}
</script>

<style lang="less">

</style>
